<template>
  <div>
    <div class="table-operator">
      <p-button type="primary" icon="plus" @click="handleEdit()">新增</p-button>
      <!-- <p-button type="primary" icon="copy" @click="handleCopy()">复制</p-button> -->
    </div>
    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="options"
      :pagination="false"
      :scroll="{ y: 400 }"
      :loading="loading">
      <template slot="action" slot-scope="text, record, index">
        <a @click="handleEdit(record, index)">编辑</a>
        <p-divider type="vertical" />
        <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(index)">
            <a>删除</a>
        </p-popconfirm>
        <!-- <a @click="handleDelete(index)">删除</a> -->
      </template>
    </p-table>

    <p-modal
      :title="title"
      :visible="visible"
      :width="600"
      @cancel="cancel"
      @ok="submit"
    >
      <p-form-model ref="form" :model="model" :rules="rules" :label-col="{span: 4}" :wrapper-col="{span: 18}">
        <p-form-model-item class="limit" prop="operatingSteps" label="操作步骤">
          <p-input v-model.trim="model.operatingSteps" rows="4" type="textarea" :maxLength="strLength" />
          <span class="limitNums">{{`${model.operatingSteps.length}/${strLength}`}}</span>
        </p-form-model-item>
        <p-form-model-item prop="figureNumber" label="图号" :maxLength="strLength">
          <p-input v-model.trim="model.figureNumber" />
        </p-form-model-item>
        <p-form-model-item prop="matter" label="注意事项">
          <p-input v-model.trim="model.matter" rows="4" type="textarea" :maxLength="strLength"/>
          <span class="limitNums">{{`${model.matter.length}/${strLength}`}}</span>
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script>
// import mixins from './mixins'
import { getAction } from '@/api/manage'
import _ from "lodash";
export default {
  // mixins: [mixins],
  props: {
    options: {
      type: Array,
      default: []
    },
    siteIndex: Object,
  },
  data() {
    return {
      loading: false,
      strLength: 200,
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key:'rowIndex',
          width: 60,
          align: 'center',
          customRender(t,r,index) {
            return index + 1;
          }
        },
        {
          title: '图号',
          align: 'center',
          dataIndex: 'figureNumber',
          width: 120,
        },
        {
          title: '操作步骤',
          align: 'center',
          ellipsis: true,
          // width: 200,
          dataIndex: 'operatingSteps'
        },
        {
          title: '注意事项',
          align: 'center',
          ellipsis: true,
          // width: 200,
          dataIndex: 'matter'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          width: 100,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      // options: [],
      title: '',
      visible: false,
      model: {
        id: '',
        operatingSteps: '',
        figureNumber: '',
        matter: '',
        index: ''
      },
      rules: {
        operatingSteps: {
          required: true,
          message: '请输入操作步骤'
        },
        figureNumber: {
          required: true,
          message: '请输入图号'
        },
        matter: {
          required: true,
          message: '请输入注意事项'
        }
      }
    }
  },
  methods: {
    /* loadData(params) {
      this.loading = true
      getAction('/mes-craft/craft/mesPeStationSopMake/queryMesPeMattersNeedAttentionByMainId', params).then(res => {
        this.options = res.data
        this.loading = false
      })
    }, */
    updateOption(){
      const {index,pIndex} = this.siteIndex;
      this.$store.commit('setCurNodeData', {
        ...this.siteIndex,
        options: this.options,
        field: 'sopData',
        childField: 'stepData',
      });
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.currentItem) {
            let data = Object.assign({}, this.model)
            data.id = new Date().getTime();
            // delete data.id
            this.options.push(data)
          } else {
            const { operatingSteps, figureNumber, matter } = this.model
            this.currentItem.operatingSteps = operatingSteps
            this.currentItem.figureNumber = figureNumber
            this.currentItem.matter = matter
          }
          this.cancel();
          this.updateOption();
        }
      })
    },
    cancel() {
      this.visible = false
      this.$refs.form.resetFields()
    },
    resetModel(data) {
      for (let key in this.model) {
        this.model[key] = data && data[key] ? data[key] : ''
      }
    },
    handleEdit(data, index) {
      this.title = `${data ? '编辑' : '新增'}操作步骤&注意事项`
      this.resetModel(data)
      this.currentItem = data
      this.visible = true
    },
    handleCopy(){
      const curOption = _.cloneDeep(this.options);
      curOption.forEach(el =>{
        el.id = new Date().getTime();
      });
      this.options = this.options.concat(curOption);
      this.updateOption();
    },
    handleDelete(index) {
      this.options.splice(index, 1);
      this.updateOption();
    }
  }
}
</script>
<style lang="less">
.limit{
  .poros-form-item-control{
    position: relative;
  }
}
.limitNums{
  position: absolute;
  bottom: -2px;
  right: 9px;
  line-height: 1;
  font-size: 12px;
  height: 16px;
  color: #888;
  /* width: calc(100% - 11px); */
  background: #fff;
  text-align: right;
}
</style>